<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>resizable</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>Resizable</h3>
<p>Override defaults with $.fn.resizable.defaults.</p>

<h4>Usage</h4>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"rr"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;height:100px;border:1px&nbsp;solid&nbsp;#ccc;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-resizable" style="display: none;">	&lt;div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"&gt;&lt;/div&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#rr'</span><span>).resizable({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;maxWidth:800,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;maxHeight:600&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-resizable" style="display: none;">	$('#rr').resizable({
		maxWidth:800,
		maxHeight:600
	});
</textarea>

<h4>Properties</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>

<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>True to disable resizing.</td>
<td>false</td>
</tr>
<tr>
<td>handles</td>

<td>string</td>
<td>Indicate the direction of resizable,'n' is the north,'e' is the east,etc.</td>
<td>n, e, s, w, ne, se, sw, nw, all</td>
</tr>
<tr>
<td>minWidth</td>
<td>number</td>
<td>The minimum width when resizing.</td>
<td>10</td>
</tr>

<tr>
<td>minHeight</td>
<td>number</td>
<td>The minimum height when resizing.</td>
<td>10</td>
</tr>
<tr>
<td>maxWidth</td>
<td>number</td>
<td>The maximum width when resizing.</td>

<td>10000</td>
</tr>
<tr>
<td>maxHeight</td>
<td>number</td>
<td>The maximum height when resizing.</td>
<td>10000</td>
</tr>
<tr>
<td>edge</td>
<td>number</td>

<td>The edge of border to be resized.</td>
<td>5</td>
</tr>
</tbody></table>

<h4>Events</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>

<th><strong>Parameters</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>onStartResize</td>
<td>e</td>
<td>Fires when start resizing.</td>
</tr>
<tr>
<td>onResize</td>
<td>e</td>

<td>Fires during resizing. When return false, the DOM element will not acts actual resize action.</td>
</tr>
<tr>
<td>onStopResize</td>
<td>e</td>
<td>Firest when stop resizing.</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the resizable options.</td>
</tr>
<tr>
</tr><tr>
<td>enable</td>
<td>none</td>
<td>Enable resizable feature.</td>
</tr>
<tr>
</tr><tr>
<td>disable</td>
<td>none</td>
<td>Disable resizable feature.</td>
</tr>
<tr>
</tr></tbody></table>

</div>	
</body>
</html>